<template>
  <div id="app">
    <div class="sticky-header">头部导航栏</div>
    <div class="box1">Vue Router中的滚动行为</div>
    <div class="hot-cities">
      <h1 class="hot-cities-title">热门城市</h1>
      <div class="nav" id="nav">
        <router-link
          tag="div"
          class="nav-link"
          active-class="nav-active"
          :to="{ path: '/city-detail/1', hash: '#nav' }"
          >城市1</router-link
        >
        <router-link
          tag="div"
          class="nav-link"
          active-class="nav-active"
          :to="{ path: '/city-detail/2', hash: '#nav' }"
          >城市2</router-link
        >
        <router-link
          tag="div"
          class="nav-link"
          active-class="nav-active"
          :to="{ path: '/city-detail/3', hash: '#nav' }"
          >城市3</router-link
        >
      </div>
      <router-view />
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.sticky-header {
  position: sticky;
  top: 0;
  width: 100%;
  height: 44px;
  background-color: blue;
  color: #fff;
  text-align: center;
  line-height: 44px;
  z-index: 1;
}

.box1 {
  width: 100%;
  height: 700px;
  background-color: orange;
  color: #fff;
  font-size: 100px;
  line-height: 700px;
  text-align: center;
}

.hot-cities {
  text-align: center;
}

.hot-cities-title {
  padding: 20px 0;
}

.nav {
  display: flex;
  border-top: 1px solid #000;
}

.nav-link {
  display: flex;
  height: 50px;
  flex: 1 1 33.33%;
  justify-content: center;
  align-items: center;
}

.nav-active {
  background-color: #000;
  color: #fff;
}
</style>
